<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录验证</title> <!--表单验证-->
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 <script>
 	function checkUname(){
 		//用户输入
 		username=$("#uname").val();
 		//验证规则
 		reg=/^[a-zA-Z0-9]{3,10}$/;
 		if(!reg.test(username)){
 			$("#uname").css("border-color","red");
 			return false;
 		}else{
 			$("#uname").css("border-color","");
 			return true;
 		}
 	}
 	function checkUpsw(){
 		psw=$("#upsw").val();
 		reg=/^[0-9]{6}$/;
 		if(!reg.test(psw)){
 			$("#upsw").css("border-color","red");
 			return false;
 		}else{
 			$("#upsw").css("border-color","");
 			return true;
 		}
 		
 	}
 	function checkAll(){
 			//因为函数中返回了true false
 		checkUname();
 		checkUpsw();
 		}
 </script>
	</head>
	<body>
		<h4>要求用户名是字母和数字的组合，3-10个，密码为6个数字，错误会提示</h4>
		用户名 <input onblur="checkUname()" type="text" id="uname">
		<br/>
	   密码 <input onblur="checkUpsw()" type="password" id="upsw">
	   <br/>
	   <button onclick="checkAll()">登录</button>
	</body>
</html>
